import {Component} from "react";
import {View, Image, Input} from "@tarojs/components";
import {createClassFun} from "../utils";
import "./index.scss"

const {classNames, rootClass} = createClassFun("weapp-login-input")

export interface InputComponentProps {
  icon: string
  value: string
  password?: boolean
  placeholder?: string
  className?: string

  onInput?(value: string): void

  onBlur?(): void
  onFocus?(): void
}

export class InputComponent extends Component<InputComponentProps> {

  render() {
    return (
      <View className={rootClass(this.props.className || "")}>
        <Image className={classNames("icon")} src={this.props.icon}/>
        <Input onBlur={this.props.onBlur}
               onFocus={this.props.onFocus}
               password={this.props.password}
               value={this.props.value}
               placeholderClass={classNames("placeholder-style")}
               onInput={event => this.props.onInput && this.props.onInput(event.detail.value)}
               className={classNames("inner-input")} placeholder={this.props.placeholder}/>
        <View className={classNames("tail")}>
          {
            this.props.children
          }
        </View>
      </View>
    )
  }
}
